<template>
  <div class="el-row" style="height:100%;">
    <div class="el-col el-col-4" style="min-height: 100%;background-color: rgb(50,64,87);color:#fff;">
      <el-row>
          <el-menu default-active="0" :unique-opened="true" class="el-menu-vertical-demo el-menu--dark" @open="handleOpen" @close="handleClose" @select="handleselect">
            <el-menu-item index="0"><i class="el-icon-menu"></i>首页</el-menu-item>
            <template v-for="(value,key, subindex) in sideNavList">
              <el-submenu :index="toStr(subindex)">
                <template slot="title"><i :class="value.icon"></i>{{value.name}}</template>
                <template v-for="(item, $index) in value.list">
                  <el-menu-item  :index="toIndexStr(subindex,$index)">{{item}}</el-menu-item>
                </template>
              </el-submenu>
            </template>
          </el-menu>
      </el-row>
    </div>
    <div class="el-col el-col-20" style="height: 100%;overflow: auto;padding-left: 20px;padding-right: 20px;">
      <v-Tab></v-Tab>
    </div>
  </div>
</template>

<script>
    import Tab from './Tab.vue'
    console.log(Tab)
    export default {
      name: 'index',
      data () {
        return {
          sideNavList: {
            loginList: {
              list: ['未认证的注册', '待审核的注册', '未通过的注册', '已通过的注册', '全量的注册'],
              name: '注册管理',
              icon: 'el-icon-fa-sign-in'
            },
            accountList: {
              list: ['金牌经纪人管理', '经纪人黑名单'],
              name: '账号管理',
              icon: 'el-icon-fa-address-book-o'
            },
            agentFirmList: {
              list: ['中介公司管理', '中介门店管理'],
              name: '中介公司管理',
              icon: 'el-icon-fa-building-o'
            },
            houseList: {
              list: ['报房管理', '房源管理'],
              name: '房源管理',
              icon: 'el-icon-fa-home'
            },
            rewordList: {
              list: ['网站首页配置', '悬赏房源管理', '悬赏查看记录'],
              name: '悬赏管理',
              icon: 'el-icon-fa-trophy'
            },
            pointList: {
              list: ['带看记录', '经纪人积分管理', '经纪人积分提现', '经纪人积分配置'],
              name: '积分管理',
              icon: 'el-icon-fa-money'
            },
            lockList: {
              list: ['门锁管理'],
              name: '门锁管理',
              icon: 'el-icon-fa-lock'
            },
            baseInfoList: {
              list: ['部门管理', '职务管理', '员工管理', '权限配置', '区域管理', '小区管理'],
              name: '基础信息',
              icon: 'el-icon-fa-tachometer'
            },
            bannerList: {
              list: ['banner管理'],
              name: '网站首页配置',
              icon: 'el-icon-fa-picture-o'
            },
            systemList: {
              list: ['参数配置', '菜单管理'],
              name: '系统设置',
              icon: 'el-icon-setting'
            }
          }
        }
      },
      components: {
        'v-Tab': Tab
      },
      methods: {
        handleOpen (key, keyPath) {
          console.log(key, keyPath)
        },
        handleClose (key, keyPath) {
          console.log(key, keyPath)
        },
        handleselect (key, keyPath) {
          console.log(key, keyPath)
        },
        toStr (subindex) {
          subindex += 1
          return subindex.toString()
        },
        toIndexStr (subindex, $index) {
          return subindex + '-' + $index
        }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-submenu .el-menu-item {
  min-width:inherit;
}
.el-menu li{
  text-align: left;
}
</style>
